<template>
    <div class="bottomHistory">
        <div class="topLeftBackground">
            <img src="/src/assets/img/aboutUs/dartBackground.webp" alt="">
        </div>
        <div class="rightHero">
            <img src="/src/assets/img/aboutUs/rightHero.webp" alt="">
        </div>
        <div class="companyOriginal">
            <div class="declareOrigin">
                <h1>WHY WE ARE HERE</h1>
                <p>Supercell was founded on the idea of giving game developers and teams the independence to decide what
                    kinds of games they make and how they choose to make them. Over a decade and six global games later,
                    our dream still stands: to create great games that as many people as possible play for years and
                    that are remembered forever.</p>
                <p>We believe games have the power to bring people around the world together and closer to each other.
                    We work to create new, innovative, memorable experiences no one has played before. This is why we
                    try
                    to design games that excite wide and diverse player communities as well as to expand the audience
                    for
                    otherwise smaller “niche” game concepts.</p>
                <p>There's no simple recipe or magic formula to achieve our dream. What we do know, however, is that
                    without players, Supercell doesn't exist. Creating lovable worlds and characters that players want
                    to come back to over and over again is at the heart of how we design and operate our games.</p>
                <h3>Uncover more about our culture from our CEO's annual blogs:</h3>
                <ul>
                    <li v-for="item in news" :key="item.id">
                        <RouterLink :to="{
                                    name: item.router,
                                    params:{
                                    commonTitle: item.commonTitle,
                                    category: item.category,
                                    date: item.date,
                                    pic: item.pic,
                                    content: item.content
                                }
                        }">{{ item.title }}
                        </RouterLink>
                    </li>
                </ul>
                <p>* In 2010, we believed that creating great games is all about having the best people and providing
                    them with the best environment to focus on developing the best games. However, many years later, we
                    realized that it is not only about having the best individuals/people but having the best teams. A
                    group of great individuals does not automatically make a great team. The best team is the one with
                    the best people who work extremely well together.</p>
            </div>
        </div>
    </div>
</template>

<script setup>
defineProps(['news'])
</script>

<style scoped>
.bottomHistory {
    position: relative;
}

.topLeftBackground img {
    width: 80%;
}

.bottomHistory .rightHero img {
    position: absolute;
    height: 512px;
    top: 28%;
    right: 0;
}

.declareOrigin {
    width: 785px;
    margin: 50px auto;
}

.declareOrigin h1 {
    font-size: 34px;
    text-align: center;
    margin: 20px 0;
}

.declareOrigin p {
    font-size: 18px;
    line-height: 1.5;
    margin-bottom: 22.5px;
}

.declareOrigin h3 {
    font-size: 21px;
}

.declareOrigin ul {
    padding: 18px 40px;
    line-height: 30px;
}

.declareOrigin li a {
    font-size: 18px;
    color: rgb(45, 133, 243);
    text-decoration: none;
}
</style>